<!--
  ~ Licensed under the Apache License, Version 2.0 (the "License");
  ~ you may not use this file except in compliance with the License.
  ~ You may obtain a copy of the License at
  ~
  ~      http://www.apache.org/licenses/LICENSE-2.0
  ~
  ~ Unless required by applicable law or agreed to in writing, software
  ~ distributed under the License is distributed on an "AS IS" BASIS,
  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  ~ See the License for the specific language governing permissions and
  ~ limitations under the License.
  -->

<div class="ddp-box-widget">
  <!-- Top Control -->
  <div *ngIf="isAuthMgmtViewMode" class="ddp-top-control ddp-clear"
       [ngStyle]="{'margin-right': isVisibleScrollbar ? '20px' : '' }">
    <div class="ddp-ui-buttons">
      <div class="ddp-box-btn2" (click)="editWidget()">
        <em class="ddp-icon-widget-edit"></em>
        <!-- 툴팁 -->
        <div class="ddp-ui-tooltip-info">
          <em class="ddp-icon-view-down"></em> {{ 'msg.comm.ui.edit' | translate }}
        </div>
        <!-- // 툴팁 -->
      </div>

      <!-- 확대/축소 버튼 -->
      <div class="ddp-box-btn2">
        <em [ngClass]="{'ddp-icon-widget-downsize': isMaximize, 'ddp-icon-widget-full': !isMaximize}"
            (click)="toggleWidgetSize()"></em>
        <!-- 툴팁 -->
        <div class="ddp-ui-tooltip-info" *ngIf="isMaximize">
          <em class="ddp-icon-view-down"></em>
          {{ 'msg.comm.ui.contraction' | translate }}
        </div>
        <div class="ddp-ui-tooltip-info" *ngIf="!isMaximize">
          <em class="ddp-icon-view-down"></em>
          {{ 'msg.comm.ui.expansion' | translate }}
        </div>
        <!-- //툴팁 -->
      </div>
      <!-- 확대/축소 버튼 -->

    </div>
  </div>
  <!-- // Top Control -->

  <div class="ddp-view-widget ddp-view-widget-text">
    <div *ngIf="widget" [innerHTML]="sanitizer.bypassSecurityTrustHtml(widget.configuration['contents'])"
         spellcheck="false"></div>
  </div>

  <!-- 수정 버튼 레이어 -->
  <div *ngIf="isEditMode" class="ddp-hover-edit">
    <div class="ddp-hover-edit-in" >
      <a (click)="editWidget()" href="javascript:" class="ddp-btn-edit" ></a>
    </div>
  </div>
  <!-- // 수정 버튼 레이어 -->
</div>
